// 引入snabbdom库
const snabbdom = window.snabbdom

// 将vnode（虚拟节点）塞入空的容器中
const patch = snabbdom.init([
    snabbdom_class,
    snabbdom_props,
    snabbdom_style,
    snabbdom_eventlisteners
])

// 创建vnode（虚拟节点）
const h = snabbdom.h

// 空的容器
const container = document.getElementById('container');
// 获取按钮节点
const btn = document.getElementById('btn');

// 创建vnode
let vnode = h('ul#list', {}, [
  h('li.item', {}, '第一项'),
  h('li.item', {}, '第二项'),
])

// vnode -> 空容器
patch(container, vnode);

btn.addEventListener('click', () => {
  let newVnode = h('ul#list', {}, [
    h('li.item', {}, '第一项'),
    h('li.item', {}, '第二项111'),
    h('li.item', {}, '第三项'),
  ])

  // 用新的vnode -> 更新老的vnode
  patch(vnode, newVnode);

  vnode = newVnode;
})